<div class="cad-search-content">

  <div class="cad-search-tag" *ngIf="_partsTag.length != 0 && _baseData.searchType != 'yes'">
    <ng-container *ngFor="let parts of partsTag">
      <div (click)="tagCheck(parts)" class="cad-search-tag-content" [ngClass]="{'active': parts.checked}">
        <span>{{parts.name}}</span>
      </div>
    </ng-container>
    <div *ngIf="showTagMore" class="cad-search-tag-more" (click)="partsTagMore()">加载更多</div>

  </div>

  <!--  <div *ngIf="showStatus(_baseData.status)">-->
  <!--    <apes-tabset [apesType]="'card'">-->
  <!--      <apes-tab apesTitle="车宝仓储"-->
  <!--                *ngIf="showListItem('match')"-->
  <!--                (apesClick)="checkTabs('match')"></apes-tab>-->
  <!--      <apes-tab apesTitle="车宝商城"-->
  <!--                *ngIf="showListItem('price')"-->
  <!--                (apesClick)="checkTabs('price')"></apes-tab>-->
  <!--      <apes-tab apesTitle="三头六臂商城"-->
  <!--                *ngIf="showListItem('sanTou')"-->
  <!--                (apesClick)="checkTabs('sanTou')"></apes-tab>-->
  <!--      <apes-tab apesTitle="智能EPC"-->
  <!--                *ngIf="showListItem('intelligent')"-->
  <!--                (apesClick)="checkTabs('intelligent')"></apes-tab>-->
  <!--      <apes-tab apesTitle="通用商品"-->
  <!--                *ngIf="showCommon"-->
  <!--                (apesClick)="checkTabs('common')"></apes-tab>-->
  <!--    </apes-tabset>-->
  <!--  </div>-->

  <!--  车宝仓储-->
  <ng-container *ngIf="checkShowTab('match')">
    <apes-card [apesTitle]="matchTitle" *ngIf="showListItem('match')">

      <ng-template #matchTitle>
        <div class="cad-search-card-title">
          <div>车宝仓储</div>

          <apes-radio-group [(ngModel)]="showCommon" class="cad-search-cardTitle-radio">
            <label apes-radio
                   [apesValue]="false"
                   [ngStyle]="{color : !showCommon ? '#333333': '#999999'}">
              <span>有库存</span>
            </label>
            <label apes-radio
                   [apesValue]="true"
                   (click)="checkTabs('common')"
                   [ngStyle]="{color : showCommon ? '#333333': '#999999'}">
              <span>无库存</span>
            </label>
          </apes-radio-group>

          <div *ngIf="!publicPage" class="cad-search-cardTitle-tooltip" style="color: red">请优先选择公司库存有货商品！</div>
        </div>
      </ng-template>

      <!--      [apesScroll]="showScroll()"-->

      <ng-container *ngIf="!showCommon">

        <div *ngIf="showFilter" class="cad-search-filter-content">

          <div apes-row class="cad-search-filterResult">
            <div apes-col [apesSpan]="1" class="cad-search-filterResult-title">所有分类 ></div>
            <div apes-col [apesSpan]="23" class="cad-search-filterResult-main">
              <ng-container *ngFor="let resultData of filterResultData,index as i;">
                <div class="filterResult-box">
                  <span style="margin-right: 4px">{{resultData.name}}:</span>
                  <ng-container *ngFor="let value of resultData.values,index as i;">
                    <span>{{value.NAME ? value.NAME : value.ID}}</span>
                    <span *ngIf="resultData.values.length != i+1 && resultData.values.length != 1"
                          style="margin-right: 4px">,</span>
                  </ng-container>
                  <span class="close" (click)="clearResultData(i)">
                <i apes-icon apesType="close"></i>
              </span>
                </div>
              </ng-container>
            </div>
          </div>

          <ng-container *ngFor="let filter of showFilterData">
            <div apes-row class="cad-search-filterCondition">
              <div apes-col [apesSpan]="1" class="cad-search-filterCondition-title">
                <div>{{filter.name}}:</div>
              </div>
              <div apes-col [apesSpan]="21" style="padding: 0">
                <div class="cad-search-filterCondition-main"
                     [ngClass]="{'more':filter.showMore,'multiple':filter.multiple}">
                  <ng-container *ngFor="let value of filter.values; index as i;">
                    <div *ngIf="!filter.multiple" class="filterCondition-box"
                         (click)="selectFilterData(filter,i)">{{value.NAME ? value.NAME : value.ID}}</div>
                    <label *ngIf="filter.multiple" apes-checkbox [(ngModel)]="value.checked">
                  <span class="filterCondition-box">
                    {{value.NAME ? value.NAME : value.ID}}
                  </span>
                    </label>
                  </ng-container>
                </div>
                <div *ngIf="filter.multiple" class="cad-search-filterCondition-btn">
                  <button apes-button apesType="primary" style="margin-right: 8px;" (click)="selectFilterData(filter)">
                    提交
                  </button>
                  <button apes-button apesType="default" style="margin-right: 8px;" (click)="showMultipleBtn(filter)">
                    取消
                  </button>
                </div>
              </div>
              <div apes-col [apesSpan]="2" class="cad-search-filterCondition-more">
                <div *ngIf="filter.values.length > 1 && !filter.multiple" class="filterCondition-box"
                     (click)="showMultipleBtn(filter)">多选 +
                </div>
                <div *ngIf="filter.values.length > 20" class="filterCondition-box" (click)="showMoreBtn(filter)">
                  <ng-container *ngIf="filter.showMore && !filter.multiple">
                    <span>更多 </span>
                    <i apes-icon apesType="down"></i>
                  </ng-container>
                  <ng-container *ngIf="!filter.showMore || filter.multiple">
                    <span>收起 </span>
                    <i apes-icon apesType="up"></i>
                  </ng-container>

                </div>
              </div>
            </div>
          </ng-container>

          <div *ngIf="moreFilterData.length != 0" apes-row class="cad-search-filterMore">
            <div apes-col [apesSpan]="1">
              筛选条件:
            </div>
            <div apes-col [apesSpan]="23">
              <ng-container *ngFor="let more of moreFilterData">
                <a class="filterCondition-box" apes-dropdown [apesDropdownMenu]="menu"
                   [apesOverlayClassName]="'cad-search-filterMore-dropdown'">
                  {{more.name}}
                  <i apes-icon apesType="down"></i>
                </a>
                <apes-dropdown-menu #menu="apesDropdownMenu" class="cad-search-filterMore-dropdown">
                  <ul apes-menu apesSelectable class="filterMore-dropdown-ul">
                    <ng-container *ngFor="let value of more.values; index as i;">
                      <li apes-menu-item class="filterMore-dropdown-li"
                          (click)="selectFilterData(more,i)">{{value.NAME ? value.NAME : value.ID}}</li>
                    </ng-container>
                  </ul>
                </apes-dropdown-menu>
              </ng-container>
            </div>
          </div>

        </div>

        <apes-table #matchTable
                    apesBordered
                    apesSize="small"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="true"
                    [apesTotal]="matchPagination.total"
                    [apesPageIndex]="matchPagination.currentPage"
                    [apesPageSize]="matchPagination.pageSize"
                    [apesLoading]="matchLoading"
                    (apesPageIndexChange)="pageIndexChange($event)"
                    [apesNoResult]="matchNoResult"
                    [apesHideOnSinglePage]="true"
                    [apesData]="matchData">
          <thead>
          <ng-template #matchNoResult>
            <div class="cad-search-content-noResult">
              <ng-container *ngIf="!_baseData.isQuery">
                <div>
                  未找到商品，换个配件名称试试，或联系数据中心定义商品
                </div>
              </ng-container>
              <ng-container *ngIf="_baseData.isQuery && _baseData.queryStock">
                <div>
                  未找到有库存的商品，请选择上方智能EPC或通过
                  <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
                  选择
                </div>
              </ng-container>
              <ng-container *ngIf="_baseData.isQuery && !_baseData.queryStock">
                <div>
                  未找到商品，可通过
                  <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
                  选择；
                  换个配件名称试试或联系数据中心定义商品
                </div>
              </ng-container>
            </div>
          </ng-template>
          <tr>
            <th style='width: 20%' [apesAlign]="'center'">商品名称</th>
            <th style='width: 15%' [apesAlign]="'center'">配件名称</th>
            <th style='width: 5%' [apesAlign]="'center'">本地库存</th>
            <th style='width: 5%' [apesAlign]="'center'">区域仓库存</th>
            <th style='width: 5%' [apesAlign]="'center'">总仓库存</th>
            <th style='width: 15%' [apesAlign]="'center'">产品描述</th>
            <th style='width: 10%' [apesAlign]="'center'">规格型号</th>
            <th style='width: 10%' [apesAlign]="'center'">商品状态</th>
            <th style='width: 5%' [apesAlign]="'center'">常用配件</th>
            <th style='width: 10%' [apesAlign]="'center'">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of matchTable.data">
            <td style='width: 20%' [apesAlign]="'center'">{{data.name}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.category.name}}</td>

            <td style='width: 5%' [apesAlign]="'center'">
              <span>{{data.stockAmount}}</span>
              <i apes-tooltip class="cad-search-filter-tooltip"
                 [apesTooltipTrigger]="'click'"
                 [apesTooltipTitle]="stockAmountTooltipTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #stockAmountTooltipTemplate>
                <span [innerHTML]="getStockAmountTooltipFormatter(data)"></span>
              </ng-template>
            </td>
            <td style='width: 5%' [apesAlign]="'center'">
              <span>{{data.subStock}}</span>
              <i apes-tooltip class="cad-search-filter-tooltip"
                 [apesTooltipTrigger]="'click'"
                 [apesTooltipTitle]="subStockTooltipTemplate" apes-icon apesType="info-circle"
                 (click)="showStock(data)"></i>
              <ng-template #subStockTooltipTemplate>
                <span [innerHTML]="getStockTooltipFormatter(data,'area')"></span>
              </ng-template>
            </td>
            <td style='width: 5%' [apesAlign]="'center'">
              <span>{{data.generalStock}}</span>
              <i apes-tooltip class="cad-search-filter-tooltip"
                 [apesTooltipTrigger]="'click'"
                 [apesTooltipTitle]="generalStockTooltipTemplate" apes-icon apesType="info-circle"
                 (click)="showStock(data)"></i>
              <ng-template #generalStockTooltipTemplate>
                <span [innerHTML]="getStockTooltipFormatter(data,'general')"></span>
              </ng-template>
            </td>

            <!--        <td style='width: 5%' [apesAlign]="'center'"-->
            <!--            apes-tooltip-->
            <!--            [apesTooltipTitle]="stockAmountTooltipTemplate">-->
            <!--          <span>{{data.stockAmount}}</span>-->
            <!--          <ng-template #stockAmountTooltipTemplate>-->
            <!--            <span [innerHTML]="getStockAmountTooltipFormatter(data)"></span>-->
            <!--          </ng-template>-->
            <!--        </td>-->
            <!--        <td style='width: 5%' [apesAlign]="'center'">{{data.subStock}}</td>-->
            <!--        <td style='width: 5%' [apesAlign]="'center'">{{data.generalStock}}</td>-->

            <td style='width: 15%' [apesAlign]="'center'">{{data.description}}</td>
            <td style='width: 10%' [apesAlign]="'center'">{{data.speAndModel}}</td>
            <td style='width: 10%' [apesAlign]="'center'">{{showState(data.state)}}</td>
            <td style='width: 5%' [apesAlign]="'center'">
              <button *ngIf="data.hasOwnProperty('star')"
                      style="padding: 0 8px;margin: 0 3px;"
                      apesType="link" apes-button
                      (click)="clickStar(data)">
                <i apes-icon
                   apesType="star"
                   style="position: relative;top:3px;color: #f5a22e;font-size: 18px;"
                   [apesTheme]="data.star != 1 ? 'outline': 'fill'"></i>
              </button>
            </td>
            <td style='width: 10%' [apesAlign]="'center'">
              <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-20px'}">
                <button *ngIf="!publicPage" apes-button style="padding: 0 8px;margin: 0 3px;"
                        [apesType]="'primary'"
                        [apesLoading]="data.loading"
                        (click)="orderMatchParts($event,data)">
                  <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
                </button>
              </apes-badge>
            </td>
          </tr>
          </tbody>

        </apes-table>
      </ng-container>


      <ng-container *ngIf="showCommon">

        <div *ngIf="showFilter" class="cad-search-filter-content">

          <div apes-row class="cad-search-filterResult">
            <div apes-col [apesSpan]="1" class="cad-search-filterResult-title">所有分类 ></div>
            <div apes-col [apesSpan]="23" class="cad-search-filterResult-main">
              <ng-container *ngFor="let resultData of filterResultData,index as i;">
                <div class="filterResult-box">
                  <span style="margin-right: 4px">{{resultData.name}}:</span>
                  <ng-container *ngFor="let value of resultData.values,index as i;">
                    <span>{{value.NAME ? value.NAME : value.ID}}</span>
                    <span *ngIf="resultData.values.length != i+1 && resultData.values.length != 1"
                          style="margin-right: 4px">,</span>
                  </ng-container>
                  <span class="close" (click)="clearResultData(i)">
                <i apes-icon apesType="close"></i>
              </span>
                </div>
              </ng-container>
            </div>
          </div>

          <ng-container *ngFor="let filter of showFilterData">
            <div apes-row class="cad-search-filterCondition">
              <div apes-col [apesSpan]="1" class="cad-search-filterCondition-title">
                <div>{{filter.name}}:</div>
              </div>
              <div apes-col [apesSpan]="21" style="padding: 0">
                <div class="cad-search-filterCondition-main"
                     [ngClass]="{'more':filter.showMore,'multiple':filter.multiple}">
                  <ng-container *ngFor="let value of filter.values; index as i;">
                    <div *ngIf="!filter.multiple" class="filterCondition-box"
                         (click)="selectFilterData(filter,i,false)">{{value.NAME ? value.NAME : value.ID}}</div>
                    <label *ngIf="filter.multiple" apes-checkbox [(ngModel)]="value.checked">
                  <span class="filterCondition-box">
                    {{value.NAME ? value.NAME : value.ID}}
                  </span>
                    </label>
                  </ng-container>
                </div>
                <div *ngIf="filter.multiple" class="cad-search-filterCondition-btn">
                  <button apes-button apesType="primary" style="margin-right: 8px;"
                          (click)="selectFilterData(filter,null,false)">
                    提交
                  </button>
                  <button apes-button apesType="default" style="margin-right: 8px;" (click)="showMultipleBtn(filter)">
                    取消
                  </button>
                </div>
              </div>
              <div apes-col [apesSpan]="2" class="cad-search-filterCondition-more">
                <div *ngIf="filter.values.length > 1 && !filter.multiple" class="filterCondition-box"
                     (click)="showMultipleBtn(filter)">多选 +
                </div>
                <div *ngIf="filter.values.length > 20" class="filterCondition-box" (click)="showMoreBtn(filter)">
                  <ng-container *ngIf="filter.showMore && !filter.multiple">
                    <span>更多 </span>
                    <i apes-icon apesType="down"></i>
                  </ng-container>
                  <ng-container *ngIf="!filter.showMore || filter.multiple">
                    <span>收起 </span>
                    <i apes-icon apesType="up"></i>
                  </ng-container>

                </div>
              </div>
            </div>
          </ng-container>

          <div *ngIf="moreFilterData.length != 0" apes-row class="cad-search-filterMore">
            <div apes-col [apesSpan]="1">
              筛选条件:
            </div>
            <div apes-col [apesSpan]="23">
              <ng-container *ngFor="let more of moreFilterData">
                <a class="filterCondition-box" apes-dropdown [apesDropdownMenu]="menu"
                   [apesOverlayClassName]="'cad-search-filterMore-dropdown'">
                  {{more.name}}
                  <i apes-icon apesType="down"></i>
                </a>
                <apes-dropdown-menu #menu="apesDropdownMenu" class="cad-search-filterMore-dropdown">
                  <ul apes-menu apesSelectable class="filterMore-dropdown-ul">
                    <ng-container *ngFor="let value of more.values; index as i;">
                      <li apes-menu-item class="filterMore-dropdown-li"
                          (click)="selectFilterData(more,i,false)">{{value.NAME ? value.NAME : value.ID}}</li>
                    </ng-container>
                  </ul>
                </apes-dropdown-menu>
              </ng-container>
            </div>
          </div>

        </div>

        <apes-table #commonTable
                    apesBordered
                    apesSize="small"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="true"
                    [apesTotal]="commonPagination.total"
                    [apesPageIndex]="commonPagination.currentPage"
                    [apesPageSize]="commonPagination.pageSize"
                    [apesLoading]="commonLoading"
                    (apesPageIndexChange)="pageIndexChange($event,false)"
                    [apesNoResult]="commonNoResult"
                    [apesHideOnSinglePage]="true"
                    [apesData]="commonData">
          <thead>
          <ng-template #commonNoResult>
            <div class="cad-search-content-noResult">
              <ng-container *ngIf="!_baseData.isQuery">
                <div>
                  未找到商品，换个配件名称试试，或联系数据中心定义商品
                </div>
              </ng-container>
              <ng-container *ngIf="_baseData.isQuery && _baseData.queryStock">
                <div>
                  未找到有库存的商品，请选择上方智能EPC或通过
                  <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
                  选择
                </div>
              </ng-container>
              <ng-container *ngIf="_baseData.isQuery && !_baseData.queryStock">
                <div>
                  未找到商品，可通过
                  <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
                  选择；
                  换个配件名称试试或联系数据中心定义商品
                </div>
              </ng-container>
            </div>
          </ng-template>
          <tr>
            <th style='width: 20%' [apesAlign]="'center'">商品名称</th>
            <th style='width: 15%' [apesAlign]="'center'">配件名称</th>
            <th style='width: 5%' [apesAlign]="'center'">本地库存</th>
            <th style='width: 5%' [apesAlign]="'center'">区域仓库存</th>
            <th style='width: 5%' [apesAlign]="'center'">总仓库存</th>
            <th style='width: 15%' [apesAlign]="'center'">产品描述</th>
            <th style='width: 10%' [apesAlign]="'center'">规格型号</th>
            <th style='width: 10%' [apesAlign]="'center'">商品状态</th>
            <th style='width: 5%' [apesAlign]="'center'">常用配件</th>
            <th style='width: 10%' [apesAlign]="'center'">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of commonTable.data">
            <td style='width: 20%' [apesAlign]="'center'">{{data.name}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.category.name}}</td>

            <td style='width: 5%' [apesAlign]="'center'">
              <span>{{data.stockAmount}}</span>
              <i apes-tooltip class="cad-search-filter-tooltip"
                 [apesTooltipTrigger]="'click'"
                 [apesTooltipTitle]="stockAmountTooltipTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #stockAmountTooltipTemplate>
                <span [innerHTML]="getStockAmountTooltipFormatter(data)"></span>
              </ng-template>
            </td>
            <td style='width: 5%' [apesAlign]="'center'">
              <span>{{data.subStock}}</span>
              <i apes-tooltip class="cad-search-filter-tooltip"
                 [apesTooltipTrigger]="'click'"
                 [apesTooltipTitle]="subStockTooltipTemplate" apes-icon apesType="info-circle"
                 (click)="showStock(data)"></i>
              <ng-template #subStockTooltipTemplate>
                <span [innerHTML]="getStockTooltipFormatter(data,'area')"></span>
              </ng-template>
            </td>
            <td style='width: 5%' [apesAlign]="'center'">
              <span>{{data.generalStock}}</span>
              <i apes-tooltip class="cad-search-filter-tooltip"
                 [apesTooltipTrigger]="'click'"
                 [apesTooltipTitle]="generalStockTooltipTemplate" apes-icon apesType="info-circle"
                 (click)="showStock(data)"></i>
              <ng-template #generalStockTooltipTemplate>
                <span [innerHTML]="getStockTooltipFormatter(data,'general')"></span>
              </ng-template>
            </td>

            <td style='width: 15%' [apesAlign]="'center'">{{data.description}}</td>
            <td style='width: 10%' [apesAlign]="'center'">{{data.speAndModel}}</td>
            <td style='width: 10%' [apesAlign]="'center'">{{showState(data.state)}}</td>
            <td style='width: 5%' [apesAlign]="'center'">
              <button *ngIf="data.hasOwnProperty('star')"
                      style="padding: 0 8px;margin: 0 3px;"
                      apesType="link" apes-button
                      (click)="clickStar(data)">
                <i apes-icon
                   apesType="star"
                   style="position: relative;top:3px;color: #f5a22e;font-size: 18px;"
                   [apesTheme]="data.star != 1 ? 'outline': 'fill'"></i>
              </button>
            </td>
            <td style='width: 10%' [apesAlign]="'center'">
              <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-20px'}">
                <button *ngIf="!publicPage" apes-button style="padding: 0 8px;margin: 0 3px;"
                        [apesType]="'primary'"
                        [apesLoading]="data.loading"
                        (click)="orderMatchParts($event,data)">
                  <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
                </button>
              </apes-badge>
            </td>
          </tr>
          </tbody>

        </apes-table>
      </ng-container>

    </apes-card>
  </ng-container>

  <!--  车宝商城-->
  <ng-container *ngIf="checkShowTab('price')">
    <apes-card [apesTitle]="priceTitle" *ngIf="showListItem('price')">

      <ng-template #priceTitle>
        <div class="cad-search-card-title">
          <div>车宝商城</div>
          <div *ngIf="!publicPage" class="cad-search-cardTitle-tooltip">可以直接下单采购！</div>
        </div>
      </ng-template>

      <apes-table #priceTable
                  apesBordered
                  apesSize="small"
                  [apesFrontPagination]="false"
                  [apesShowPagination]="false"
                  [apesLoading]="priceLoading"
                  [apesHideOnSinglePage]="true"
                  [apesData]="priceData">
        <thead>
        <tr>
          <ng-container *ngFor="let tr of priceTableCol">
            <th [ngStyle]="{'width' : tr.style}" [apesAlign]="'center'">{{tr.name}}</th>
          </ng-container>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of priceTable.data">

          <ng-container *ngFor="let tr of priceTableCol">

            <td *ngIf="tr.key != 'operation'" [ngStyle]="{'width' : tr.style}"
                [apesAlign]="'center'">{{showPrice(data, tr)}}</td>

            <td *ngIf="tr.key == 'operation'" style='width: 5%' [apesAlign]="'center'">
              <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-20px'}">
                <button *ngIf="!publicPage" apes-button style="padding: 0 8px;margin: 0 3px;"
                        [apesType]="'primary'"
                        [apesLoading]="data.loading"
                        (click)="orderPriceParts($event,data)">
                  <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
                </button>
              </apes-badge>
            </td>
          </ng-container>

        </tr>
        </tbody>

      </apes-table>

    </apes-card>
  </ng-container>

  <!--  三头六臂商城-->
  <ng-container *ngIf="checkShowTab('sanTou')">
    <apes-card [apesTitle]="sanTouTitle" *ngIf="showListItem('sanTou')">

      <ng-template #sanTouTitle>
        <div class="cad-search-card-title">
          <div>三头六臂商城</div>
          <!--        <div *ngIf="!publicPage" class="cad-search-cardTitle-tooltip">可以直接下单采购！</div>-->
        </div>
      </ng-template>

      <apes-table #sanTouTable
                  apesBordered
                  apesSize="small"
                  [apesFrontPagination]="false"
                  [apesShowPagination]="true"
                  [apesTotal]="sanTouPagination.total"
                  [apesPageIndex]="sanTouPagination.currentPage"
                  [apesPageSize]="sanTouPagination.pageSize"
                  (apesPageIndexChange)="sanTouPageIndexChange($event)"
                  [apesLoading]="sanTouLoading"
                  [apesHideOnSinglePage]="true"
                  [apesData]="sanTouData">
        <thead>
        <tr>
          <th style="width : 12%" [apesAlign]="'center'">商品名称</th>
          <th style="width : 12%" [apesAlign]="'center'">配件名称</th>
          <th style="width : 11%" [apesAlign]="'center'">库存</th>
          <th style="width : 11%" [apesAlign]="'center'">品类/品牌</th>
          <th style="width : 11%" [apesAlign]="'center'">产品描述</th>
          <th style="width : 11%" [apesAlign]="'center'">规格型号</th>
          <th style="width : 9%" [apesAlign]="'center'">
            <span *ngIf="showHidden">成本价</span>
            <span *ngIf="!showHidden">--</span>
          </th>
          <th style="width : 9%" [apesAlign]="'center'">建议售价</th>
          <th style="width : 9%" [apesAlign]="'center'">供应商</th>
          <th style="width : 5%" [apesAlign]="'center'">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of sanTouTable.data">
          <td style="width : 12%" [apesAlign]="'center'">{{data.name}}</td>
          <td style="width : 12%" [apesAlign]="'center'">{{data.categoryName}}</td>
          <td style="width : 11%" [apesAlign]="'center'">{{data.quantity}}</td>
          <td style="width : 11%" [apesAlign]="'center'">{{data.brandName}}</td>
          <td style="width : 11%" [apesAlign]="'center'">{{data.description}}</td>
          <td style="width : 11%" [apesAlign]="'center'">{{data.specification}}</td>
          <td style="width : 9%" [apesAlign]="'center'">
            <span *ngIf="showHidden">{{data.salePrice}}</span>
            <span *ngIf="!showHidden">--</span>
          </td>
          <td style="width : 9%" [apesAlign]="'center'">
            <span>{{data.priceSuggested}}</span>

            <!--            <span *ngIf="showHidden">{{data.priceSuggested}}</span>-->
            <!--            <span *ngIf="!showHidden">&#45;&#45;</span>-->
          </td>
          <td style="width : 9%" [apesAlign]="'center'">{{data.supplier}}</td>
          <td style="width : 5%" [apesAlign]="'center'">
            <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-20px'}">
              <button *ngIf="!publicPage" apes-button style="padding: 0 8px;margin: 0 3px;"
                      [apesType]="'primary'"
                      [apesLoading]="data.loading"
                      [disabled]="data.quantity == 0"
                      (click)="orderPriceParts($event,data)">
                <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
              </button>
            </apes-badge>
          </td>
        </tr>
        </tbody>

      </apes-table>

    </apes-card>
  </ng-container>

  <!--  智能EPC-->
  <ng-container *ngIf="checkShowTab('intelligent')">
    <apes-card [apesTitle]="intelligentTitle"
               *ngIf="showListItem('intelligent')">

      <ng-template #intelligentTitle>
        <div class="cad-search-card-title">
          <div>智能EPC</div>
          <div *ngIf="!publicPage" class="cad-search-cardTitle-tooltip">
            需要询价的商品，选择智能配件、装配图商品，报价更快更准！可通过EPC图确认需要选择的配件；选择原厂件询价，供应商将报回多品牌价格！
          </div>
        </div>
      </ng-template>

      <apes-table #intelligentTable
                  apesBordered
                  apesSize="small"
                  [apesScroll]="showScroll()"
                  [apesLoading]="intelligentLoading"
                  [apesFrontPagination]="false"
                  [apesShowPagination]="false"
                  [apesNoResult]="intelligentNoResult"
                  [apesData]="intelligentData">
        <thead>
        <ng-template #intelligentNoResult>
          <div class="cad-search-content-noResult">
            未找到结果，换个配件名称搜索试试；亦可通过
            <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
            选择
          </div>
        </ng-template>
        <tr>
          <th style='width: 4%' [apesAlign]="'center'">EPC图</th>
          <th style='width: 4%' [apesAlign]="'center'">位置</th>
          <th style='width: 10%' [apesAlign]="'center'">OE号</th>
          <th style='width: 11%' [apesAlign]="'center'">零件名称</th>
          <th style='width: 8%' [apesAlign]="'center'">主组</th>
          <th style='width: 8%' [apesAlign]="'center'">子组</th>
          <th style='width: 11%' [apesAlign]="'center'">标准配件名称</th>
          <th style='width: 4%' [apesAlign]="'center'">用量</th>
          <th style='width: 8%' [apesAlign]="'center'">型号</th>
          <th style='width: 8%' [apesAlign]="'center'">OE描述</th>
          <th style='width: 5%' [apesAlign]="'center'">4S参考价</th>
          <th style='width: 7%' [apesAlign]="'center'">备注</th>
          <th style='width: 12%' [apesAlign]="'center'">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of intelligentTable.data">
          <td style='width: 4%' [apesAlign]="'center'">
            <div class="search-car-img-box">
              <!--            <div class="search-car-noImg" (click)="showImg(data)"></div>-->
              <img *ngIf="data.imageUrl" class="search-car-img" (click)="showImg(data)" [src]="data.imageUrl"/>
              <div *ngIf="!data.imageUrl" class="search-car-noImg">
                <i apes-icon apesType="file-image"></i>
              </div>
            </div>
          </td>
          <td style='width: 4%' [apesAlign]="'center'">{{data.imageSN}}</td>
          <td style='width: 10%' class="part-details-highLightText" [apesAlign]="'center'"
              innerHTML="{{showHighLightText(data,'partCode')}}"></td>
          <td style='width: 11%' class="part-details-highLightText" [apesAlign]="'center'"
              innerHTML="{{showHighLightText(data,'partName')}}"></td>
          <td style='width: 8%' [apesAlign]="'center'">{{data.mainGroupId}}-{{data.mainGroupName}}</td>
          <td style='width: 8%' [apesAlign]="'center'">{{data.subGroupId}}-{{data.subGroupName}}</td>
          <td style='width: 11%' [apesAlign]="'center'">{{ showPartsName(data.parts)}}</td>
          <td style='width: 4%' [apesAlign]="'center'">{{data.quantity}}</td>
          <td style='width: 8%' [apesAlign]="'center'">{{filterName(data.modelNotes)}}</td>
          <td style='width: 8%' [apesAlign]="'center'">{{data.OEMS}}</td>
          <td style='width: 5%' [apesAlign]="'center'">
            <span *ngIf="data.price != null && data.price != undefined">¥</span>
            {{data.price}}
          </td>
          <td style='width: 7%' [apesAlign]="'center'" [innerHTML]="filterName(data.notes)"></td>
          <td style='width: 12%' [apesAlign]="'center'">
            <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-11px'}">
              <button *ngIf="!data.isEasyError && !publicPage" apes-button style="padding: 0 8px;margin: 0 12px 0 3px;"
                      [apesType]="'primary'"
                      [apesLoading]="data.loading"
                      (click)="orderParts($event,data)">
                <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
              </button>
            </apes-badge>
            <button *ngIf="data.isEasyError && !publicPage" apes-button style="padding: 0 8px;margin: 0 3px;"
                    [apesType]="'default'"
                    apes-tooltip
                    [apesTooltipTitle]="'易错配件,请进入装配图确认！'">
              <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
            </button>
            <button apes-button style="padding: 0 8px;top: 2px;margin: 0 3px;"
                    [disabled]="data.parts && data.parts.length == 0" [apesType]="'primary'"
                    (click)="errorCorrection($event,data)">
              纠错
            </button>
            <button apes-button style="padding: 0 8px;top: 2px;margin: 0 3px;" [apesType]="'primary'"
                    (click)="selectPart(data)">
              装配图
            </button>
          </td>
        </tr>
        </tbody>

      </apes-table>

    </apes-card>
  </ng-container>

  <!--  通用商品-->
  <ng-container *ngIf="checkShowTab('common') && false">
    <apes-card [apesTitle]="commonTitle" *ngIf="showListItem('match')">

      <ng-template #commonTitle>
        <div class="cad-search-card-title">
          <div>通用商品</div>
          <div *ngIf="!publicPage" class="cad-search-cardTitle-tooltip" style="color: red">请优先选择公司库存有货商品！</div>
        </div>
      </ng-template>

      <div *ngIf="showFilter" class="cad-search-filter-content">

        <div apes-row class="cad-search-filterResult">
          <div apes-col [apesSpan]="1" class="cad-search-filterResult-title">所有分类 ></div>
          <div apes-col [apesSpan]="23" class="cad-search-filterResult-main">
            <ng-container *ngFor="let resultData of filterResultData,index as i;">
              <div class="filterResult-box">
                <span style="margin-right: 4px">{{resultData.name}}:</span>
                <ng-container *ngFor="let value of resultData.values,index as i;">
                  <span>{{value.NAME ? value.NAME : value.ID}}</span>
                  <span *ngIf="resultData.values.length != i+1 && resultData.values.length != 1"
                        style="margin-right: 4px">,</span>
                </ng-container>
                <span class="close" (click)="clearResultData(i)">
                <i apes-icon apesType="close"></i>
              </span>
              </div>
            </ng-container>
          </div>
        </div>

        <ng-container *ngFor="let filter of showFilterData">
          <div apes-row class="cad-search-filterCondition">
            <div apes-col [apesSpan]="1" class="cad-search-filterCondition-title">
              <div>{{filter.name}}:</div>
            </div>
            <div apes-col [apesSpan]="21" style="padding: 0">
              <div class="cad-search-filterCondition-main"
                   [ngClass]="{'more':filter.showMore,'multiple':filter.multiple}">
                <ng-container *ngFor="let value of filter.values; index as i;">
                  <div *ngIf="!filter.multiple" class="filterCondition-box"
                       (click)="selectFilterData(filter,i,false)">{{value.NAME ? value.NAME : value.ID}}</div>
                  <label *ngIf="filter.multiple" apes-checkbox [(ngModel)]="value.checked">
                  <span class="filterCondition-box">
                    {{value.NAME ? value.NAME : value.ID}}
                  </span>
                  </label>
                </ng-container>
              </div>
              <div *ngIf="filter.multiple" class="cad-search-filterCondition-btn">
                <button apes-button apesType="primary" style="margin-right: 8px;"
                        (click)="selectFilterData(filter,null,false)">
                  提交
                </button>
                <button apes-button apesType="default" style="margin-right: 8px;" (click)="showMultipleBtn(filter)">
                  取消
                </button>
              </div>
            </div>
            <div apes-col [apesSpan]="2" class="cad-search-filterCondition-more">
              <div *ngIf="filter.values.length > 1 && !filter.multiple" class="filterCondition-box"
                   (click)="showMultipleBtn(filter)">多选 +
              </div>
              <div *ngIf="filter.values.length > 20" class="filterCondition-box" (click)="showMoreBtn(filter)">
                <ng-container *ngIf="filter.showMore && !filter.multiple">
                  <span>更多 </span>
                  <i apes-icon apesType="down"></i>
                </ng-container>
                <ng-container *ngIf="!filter.showMore || filter.multiple">
                  <span>收起 </span>
                  <i apes-icon apesType="up"></i>
                </ng-container>

              </div>
            </div>
          </div>
        </ng-container>

        <div *ngIf="moreFilterData.length != 0" apes-row class="cad-search-filterMore">
          <div apes-col [apesSpan]="1">
            筛选条件:
          </div>
          <div apes-col [apesSpan]="23">
            <ng-container *ngFor="let more of moreFilterData">
              <a class="filterCondition-box" apes-dropdown [apesDropdownMenu]="menu"
                 [apesOverlayClassName]="'cad-search-filterMore-dropdown'">
                {{more.name}}
                <i apes-icon apesType="down"></i>
              </a>
              <apes-dropdown-menu #menu="apesDropdownMenu" class="cad-search-filterMore-dropdown">
                <ul apes-menu apesSelectable class="filterMore-dropdown-ul">
                  <ng-container *ngFor="let value of more.values; index as i;">
                    <li apes-menu-item class="filterMore-dropdown-li"
                        (click)="selectFilterData(more,i,false)">{{value.NAME ? value.NAME : value.ID}}</li>
                  </ng-container>
                </ul>
              </apes-dropdown-menu>
            </ng-container>
          </div>
        </div>

      </div>

      <apes-table #commonTable
                  apesBordered
                  apesSize="small"
                  [apesFrontPagination]="false"
                  [apesShowPagination]="true"
                  [apesTotal]="commonPagination.total"
                  [apesPageIndex]="commonPagination.currentPage"
                  [apesPageSize]="commonPagination.pageSize"
                  [apesLoading]="commonLoading"
                  (apesPageIndexChange)="pageIndexChange($event,false)"
                  [apesNoResult]="commonNoResult"
                  [apesHideOnSinglePage]="true"
                  [apesData]="commonData">
        <thead>
        <ng-template #commonNoResult>
          <div class="cad-search-content-noResult">
            <ng-container *ngIf="!_baseData.isQuery">
              <div>
                未找到商品，换个配件名称试试，或联系数据中心定义商品
              </div>
            </ng-container>
            <ng-container *ngIf="_baseData.isQuery && _baseData.queryStock">
              <div>
                未找到有库存的商品，请选择上方智能EPC或通过
                <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
                选择
              </div>
            </ng-container>
            <ng-container *ngIf="_baseData.isQuery && !_baseData.queryStock">
              <div>
                未找到商品，可通过
                <span style="color: #0589DD; cursor: pointer;" (click)="back()">装配图</span>
                选择；
                换个配件名称试试或联系数据中心定义商品
              </div>
            </ng-container>
          </div>
        </ng-template>
        <tr>
          <th style='width: 20%' [apesAlign]="'center'">商品名称</th>
          <th style='width: 15%' [apesAlign]="'center'">配件名称</th>
          <th style='width: 5%' [apesAlign]="'center'">本地库存</th>
          <th style='width: 5%' [apesAlign]="'center'">区域仓库存</th>
          <th style='width: 5%' [apesAlign]="'center'">总仓库存</th>
          <th style='width: 15%' [apesAlign]="'center'">产品描述</th>
          <th style='width: 10%' [apesAlign]="'center'">规格型号</th>
          <th style='width: 10%' [apesAlign]="'center'">商品状态</th>
          <th style='width: 5%' [apesAlign]="'center'">常用配件</th>
          <th style='width: 10%' [apesAlign]="'center'">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of commonTable.data">
          <td style='width: 20%' [apesAlign]="'center'">{{data.name}}</td>
          <td style='width: 15%' [apesAlign]="'center'">{{data.category.name}}</td>

          <td style='width: 5%' [apesAlign]="'center'">
            <span>{{data.stockAmount}}</span>
            <i apes-tooltip class="cad-search-filter-tooltip"
               [apesTooltipTrigger]="'click'"
               [apesTooltipTitle]="stockAmountTooltipTemplate" apes-icon apesType="info-circle"></i>
            <ng-template #stockAmountTooltipTemplate>
              <span [innerHTML]="getStockAmountTooltipFormatter(data)"></span>
            </ng-template>
          </td>
          <td style='width: 5%' [apesAlign]="'center'">
            <span>{{data.subStock}}</span>
            <i apes-tooltip class="cad-search-filter-tooltip"
               [apesTooltipTrigger]="'click'"
               [apesTooltipTitle]="subStockTooltipTemplate" apes-icon apesType="info-circle"
               (click)="showStock(data)"></i>
            <ng-template #subStockTooltipTemplate>
              <span [innerHTML]="getStockTooltipFormatter(data,'area')"></span>
            </ng-template>
          </td>
          <td style='width: 5%' [apesAlign]="'center'">
            <span>{{data.generalStock}}</span>
            <i apes-tooltip class="cad-search-filter-tooltip"
               [apesTooltipTrigger]="'click'"
               [apesTooltipTitle]="generalStockTooltipTemplate" apes-icon apesType="info-circle"
               (click)="showStock(data)"></i>
            <ng-template #generalStockTooltipTemplate>
              <span [innerHTML]="getStockTooltipFormatter(data,'general')"></span>
            </ng-template>
          </td>

          <td style='width: 15%' [apesAlign]="'center'">{{data.description}}</td>
          <td style='width: 10%' [apesAlign]="'center'">{{data.speAndModel}}</td>
          <td style='width: 10%' [apesAlign]="'center'">{{showState(data.state)}}</td>
          <td style='width: 5%' [apesAlign]="'center'">
            <button *ngIf="data.hasOwnProperty('star')"
                    style="padding: 0 8px;margin: 0 3px;"
                    apesType="link" apes-button
                    (click)="clickStar(data)">
              <i apes-icon
                 apesType="star"
                 style="position: relative;top:3px;color: #f5a22e;font-size: 18px;"
                 [apesTheme]="data.star != 1 ? 'outline': 'fill'"></i>
            </button>
          </td>
          <td style='width: 10%' [apesAlign]="'center'">
            <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-20px'}">
              <button *ngIf="!publicPage" apes-button style="padding: 0 8px;margin: 0 3px;"
                      [apesType]="'primary'"
                      [apesLoading]="data.loading"
                      (click)="orderMatchParts($event,data)">
                <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
              </button>
            </apes-badge>
          </td>
        </tr>
        </tbody>

      </apes-table>

    </apes-card>
  </ng-container>

  <!--  <div>{{_baseData | json}}</div>-->

  <div class="cad-search-footer">
    <div *ngIf="_baseData.isQuery && showStatus(_baseData.status)">
      <span *ngIf="showIntelligentDisplay" class="cad-search-footer-black" (click)="back()">没搜到？通过装配图选择</span>
    </div>
    <!--    <div *ngIf="showListItem('match')&& queryStock && !showCommon">-->
    <!--    <div *ngIf="showListItem('match') && !showCommon">-->
    <!--      <span class="cad-search-footer-select" (click)="showCommonTab()"> 点击后选择上方通用商品（谨慎选择）！</span>-->
    <!--    </div>-->
  </div>

  <!--  <apes-empty class="cad-search-main"-->
  <!--              *ngIf="(matchData.length == 0 && intelligentData.length == 0) && !matchLoading && !intelligentLoading"></apes-empty>-->

  <apes-modal [(apesVisible)]="isVisible"
              apesTitle="配件名称纠错"
              [apesFooter]="modalFooter"
              (apesOnCancel)="handleCancel()">
    <textarea apes-input placeholder="请描述正确的配件名称" [(ngModel)]="remark" apesAutosize></textarea>
    <ng-template #modalFooter>
      <button apes-button apesType="default" (click)="handleCancel()">取消</button>
      <button apes-button apesType="primary" [disabled]="remark == ''" (click)="handleOk()">确定</button>
    </ng-template>
  </apes-modal>

</div>
